<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-lx-calendar"></i> 表单</el-breadcrumb-item>
                <el-breadcrumb-item>编辑器</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="plugins-tips">
                Vue-Quill-Editor：基于Quill、适用于Vue2的富文本编辑器。
                访问地址：<a href="https://github.com/surmon-china/vue-quill-editor" target="_blank">vue-quill-editor</a>
            </div>
            <quill-editor :options="editorOption" ref="myTextEditor" v-model="content"></quill-editor>
            <el-button @click="submit" class="editor-btn" type="primary">提交</el-button>
        </div>
    </div>
</template>

<script>
	import 'quill/dist/quill.core.css';
	import 'quill/dist/quill.snow.css';
	import 'quill/dist/quill.bubble.css';
	import {quillEditor} from 'vue-quill-editor';
	
	export default {
		name: 'editor',
		data: function () {
			return {
				content: '',
				editorOption: {
					placeholder: 'Hello World'
				}
			}
		},
		components: {
			quillEditor
		},
		methods: {
			onEditorChange ({editor, html, text}) {
				this.content = html;
			},
			submit () {
				console.log(this.content);
				this.$message.success('提交成功！');
			}
		}
	}
</script>
<style scoped>
    .editor-btn {
        margin-top: 20px;
    }
</style>
